<!DOCTYPE html>
<html>
	<head>
		<title>Converse</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="/style.css">
		<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
		<style>
			#converse {
				font-size: 16pt;
			}
			#converse .box {
				margin-bottom: 0.2em;
				padding: 1em;
				border-radius: 0.1em;
			}
			#converse b:after {
				content: " ";
			}
			#converse li .when {
				position: absolute;
				top: 0;
				right: -2em;
				padding: 0.5em 1em;
				background: rgba(100%,100%,100%,0.9);
				opacity: 0;
			}
			#converse li:hover .when {
				opacity: 1;
				right: 0em;
			}
			.poiret {
				font-family: 'Poiret One', sans-serif;
			}
			.large {
				font-size: 200%;
			}
			#converse .what, #converse .who {
				cursor: text;
				outline: none;
				display: inline;
				min-width: 1em;
				padding-left: 1px;
			}
			[contentEditable=true]:empty:not(:focus):before{
				content:attr(data-text)
			}

			#title {
				margin-bottom: 0.5em;
			}

			.say {
				margin: 0 0 0.4em 0.4em;
				padding: 0.2em 0.5em;
			}

			 #name-input {
				 margin-top: 0.5em;
				 margin-right: 0.5em;
			 }

			 #message-input {
				 margin-top: 0.5em;
			 }
		</style>
  </head>
	<body>
		<div id="converse" class="hue2 page">
			<div class="pad">
				<div id='title' class="poiret large rubric whitet">Have a Conversation...</div>
				<div>
					<ul>
						<li class="none"></li>
					</ul>

					<form class="white huet2 box">
						<div>
							<div class="say hue2 right whitet box act">say</div>
							<b id="name-input" class="jot left who" contenteditable="true" data-text="Name"></b>
							<p id="message-input" class="jot left what" contenteditable="true" data-text="Write a message..."></p>
						</div>
					</form>

					<div class="model">
						<li class="white huet2 box">
							<b class="who"></b>
							<p class="what"></p>
							<span class="sort none">0</span>
							<div class="when"></div>
						</li>
					</div>
				</div>
			</div>
		</div>

		<script src="/jquery.js"></script>
		<script src="/gun.js"></script>
		<script src="/gun/nts.js"></script>
		<script>
			var gun = Gun(location.origin + '/gun');
			var chat = gun.get('converse/' + location.hash.slice(1));

			$("form .say").on('click', submit);
			$("form .what").on('keydown', enter);
			function enter(e){
				if(e.which !== 13){ return }
				submit(e);
			}
			function submit(e){
				e.preventDefault();

				var msg = {when: Gun.time.is()};

				msg.who = $('form .who').text();
				if(!msg.who){
					msg.who = 'user' + Gun.text.random(3);
					$('form .who').text(msg.who);
				}

				msg.what = $('form .what').text();
				if(!msg.what){ return }

				chat.set(msg);
				$('form .what').text('');
			}

			chat.map().val(function(msg, id){
				if(!msg){ return }
				var ul = $('ul');
				var last = sort(msg.when, ul.children('li').last());

				var li = $("#msg-" + id)[0]; // grab if exists
				if(!li){
					li = $('.model li').clone(true) // else create it
						.attr('id', 'msg-' + id)
						.insertAfter(last);
				}

				// bind the message data into the UI
				li = $(li);
				li.find('.who').text(msg.who);
				li.find('.what').text(msg.what);
				li.find('.sort').text(msg.when);

				var time = new Date(msg.when);
				li.find('.when').text(time.toDateString() + ', ' + time.toLocaleTimeString());

				$('html, body').stop(true, true)
					.animate({scrollTop: ul.height()});
			});

			function sort(id, li){
				var num = parseFloat(id);
				var id = $(li).find('.sort').text() || -Infinity;
				var at = num >= parseFloat(id);
				return at ? li : sort(id, li.prev());
			}
		</script>
	</body>
</html>